<template>
  <view class="data-brief-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-title">数据简报</view>
    </view>

    <!-- 日期选择器 -->
    <view class="date-selector">
      <view class="date-display" @click="showDatePicker = true">
        <text class="date-text">{{ formatDate(selectedDate) }}</text>
        <image src="/static/icons/calendar-icon.svg" class="calendar-icon"></image>
      </view>
    </view>

    <!-- 数据卡片区域 -->
    <view class="data-cards">
      <!-- 第一行：应收数据、实收数据 -->
      <view class="card-row">
        <view class="data-card">
          <view class="card-title">应收数据</view>
          <view class="card-value">{{ formatMoney(briefData.receivableAmount) }}</view>
        </view>
        <view class="data-card">
          <view class="card-title">实收数据</view>
          <view class="card-value">{{ formatMoney(briefData.actualAmount) }}</view>
        </view>
      </view>

      <!-- 第二行：银行数据、即缴率 -->
      <view class="card-row">
        <view class="data-card">
          <view class="card-title">银行数据</view>
          <view class="card-value">{{ formatMoney(briefData.bankAmount) }}</view>
        </view>
        <view class="data-card">
          <view class="card-title">即缴率</view>
          <view class="card-value">{{ formatPercent(briefData.immediatePaymentRate) }}</view>
        </view>
      </view>

      <!-- 第三行：实缴率、缴费率 -->
      <view class="card-row">
        <view class="data-card">
          <view class="card-title">实缴率</view>
          <view class="card-value">{{ formatPercent(briefData.actualPaymentRate) }}</view>
        </view>
        <view class="data-card">
          <view class="card-title">缴费率</view>
          <view class="card-value">{{ formatPercent(briefData.paymentRate) }}</view>
        </view>
      </view>

      <!-- 第四行：泊位应收、泊位实收 -->
      <view class="card-row">
        <view class="data-card">
          <view class="card-title">泊位应收</view>
          <view class="card-value">{{ formatMoney(briefData.berthReceivable) }}</view>
        </view>
        <view class="data-card">
          <view class="card-title">泊位实收</view>
          <view class="card-value">{{ formatMoney(briefData.berthActual) }}</view>
        </view>
      </view>

      <!-- 第五行：公众号新增、即缴与补缴 -->
      <view class="card-row">
        <view class="data-card">
          <view class="card-title">公众号新增</view>
          <view class="card-value">{{ briefData.wechatNewUsers }}人</view>
        </view>
        <view class="data-card">
          <view class="card-title">即缴与补缴</view>
          <view class="card-value">{{ formatMoney(briefData.immediateAndSupplementary) }}</view>
        </view>
      </view>

      <!-- 第六行：注册用户、认证用户 -->
      <view class="card-row">
        <view class="data-card">
          <view class="card-title">注册用户</view>
          <view class="card-value">{{ briefData.registeredUsers }}人</view>
        </view>
        <view class="data-card">
          <view class="card-title">认证用户</view>
          <view class="card-value">{{ briefData.verifiedUsers }}人</view>
        </view>
      </view>
    </view>

    <!-- 一键复制按钮 -->
    <view class="copy-section">
      <button class="copy-btn" @click="copyDataToClipboard">
        <image src="/static/icons/copy-icon.svg" class="copy-icon"></image>
        <text class="copy-text">一键复制数据简报</text>
      </button>
    </view>

    <!-- 日期选择弹窗 -->
    <up-datetime-picker
      ref="datetimePicker"
      v-model="showDatePicker"
      mode="date"
      :value="selectedDate"
      @confirm="onDateConfirm"
      @cancel="showDatePicker = false"
    ></up-datetime-picker>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const selectedDate = ref(new Date())
const showDatePicker = ref(false)

// 数据简报数据
const briefData = ref({
  receivableAmount: 0,
  actualAmount: 0,
  bankAmount: 0,
  immediatePaymentRate: 0,
  actualPaymentRate: 0,
  paymentRate: 0,
  berthReceivable: 0,
  berthActual: 0,
  wechatNewUsers: 0,
  immediateAndSupplementary: 0,
  registeredUsers: 0,
  verifiedUsers: 0
})

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 格式化金额
const formatMoney = (amount) => {
  return `¥${amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
}

// 格式化百分比
const formatPercent = (rate) => {
  return `${rate.toFixed(2)}%`
}

// 日期确认
const onDateConfirm = (value) => {
  selectedDate.value = new Date(value)
  showDatePicker.value = false
  loadBriefData()
}

// 加载数据简报数据
const loadBriefData = () => {
  // 模拟数据生成
  const baseAmount = Math.random() * 100000 + 50000 // 50000-150000
  
  briefData.value = {
    receivableAmount: baseAmount,
    actualAmount: baseAmount * (0.85 + Math.random() * 0.1), // 85%-95%
    bankAmount: baseAmount * (0.3 + Math.random() * 0.2), // 30%-50%
    immediatePaymentRate: 75 + Math.random() * 20, // 75%-95%
    actualPaymentRate: 80 + Math.random() * 15, // 80%-95%
    paymentRate: 85 + Math.random() * 10, // 85%-95%
    berthReceivable: baseAmount * (0.6 + Math.random() * 0.2), // 60%-80%
    berthActual: baseAmount * (0.5 + Math.random() * 0.2), // 50%-70%
    wechatNewUsers: Math.floor(Math.random() * 200) + 50, // 50-250人
    immediateAndSupplementary: baseAmount * (0.4 + Math.random() * 0.3), // 40%-70%
    registeredUsers: Math.floor(Math.random() * 500) + 100, // 100-600人
    verifiedUsers: Math.floor(Math.random() * 300) + 80 // 80-380人
  }
}

// 一键复制数据简报
const copyDataToClipboard = () => {
  const dateStr = formatDate(selectedDate.value)
  const reportText = `数据简报 - ${dateStr}

` +
    `应收数据：${formatMoney(briefData.value.receivableAmount)}\n` +
    `实收数据：${formatMoney(briefData.value.actualAmount)}\n` +
    `银行数据：${formatMoney(briefData.value.bankAmount)}\n` +
    `即缴率：${formatPercent(briefData.value.immediatePaymentRate)}\n` +
    `实缴率：${formatPercent(briefData.value.actualPaymentRate)}\n` +
    `缴费率：${formatPercent(briefData.value.paymentRate)}\n` +
    `泊位应收：${formatMoney(briefData.value.berthReceivable)}\n` +
    `泊位实收：${formatMoney(briefData.value.berthActual)}\n` +
    `公众号新增：${briefData.value.wechatNewUsers}人\n` +
    `即缴与补缴：${formatMoney(briefData.value.immediateAndSupplementary)}\n` +
    `注册用户：${briefData.value.registeredUsers}人\n` +
    `认证用户：${briefData.value.verifiedUsers}人`

  // 使用uni-app的复制到剪贴板API
  uni.setClipboardData({
    data: reportText,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success',
        duration: 2000
      })
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'error',
        duration: 2000
      })
    }
  })
}

// 页面加载
onMounted(() => {
  loadBriefData()
})
</script>

<style lang="scss" scoped>
.data-brief-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx 30rpx;
  color: white;
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
  }
}

.date-selector {
  padding: 30rpx;
  background-color: white;
  margin: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .date-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    background-color: #fafafa;
    
    .date-text {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }
    
    .calendar-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.data-cards {
  padding: 0 20rpx;
  
  .card-row {
    display: flex;
    margin-bottom: 20rpx;
    gap: 20rpx;
    
    .data-card {
      flex: 1;
      background-color: white;
      border-radius: 20rpx;
      padding: 30rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .card-title {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 15rpx;
        text-align: center;
      }
      
      .card-value {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        text-align: center;
      }
    }
  }
}

.copy-section {
  padding: 30rpx;
  
  .copy-btn {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.3);
    
    &:active {
      transform: scale(0.98);
    }
    
    .copy-icon {
      width: 40rpx;
      height: 40rpx;
    }
    
    .copy-text {
      color: white;
    }
  }
}
</style>